<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<title></title>
		<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			function f1(){
			//① $('#id属性值')
            // var input = document.getElementById("username");
            // input.style.color = "red";
			// style="color: red;width: 200px;background-color:red;"
			
			// css这个方法是jQuery中专门操作样式使用的
				var value = $('#username').css('color');
				console.log(value);
				$('#username').css('color','red');
				$('#username').css('width','500px');
				
				//② $('tag标签名称')tag标签选择器
				// domObj.style.backgroundColor
				//$('input').css('background-color','bule');
				
				//③ $('.class属性值') class类别选择器
				$('.apple').css('background-color','green');
				
				//④ $('*') 通配符选择器
				$('*').css('background-color','gray');
				
				//⑤ $('s1,s2,s3...')联合选择器selector
				$('p,#username,.apple').css('font-size','25px');
			}
		</script>
		<script type="text/css">
			p{}
			.apple{}
			*{}
			.apple,span,input{}
		</script>
	</head>
	<body>
		<h2>基本选择器</h2>
		<input style="color: #00FFFF;" type="text" name="username" id="username" value="xiaoqiang" /><br>
		<p>today is sunday</p>
		<div class="apple">
			we are studying
		</div>
		<span>
			this is beijing
		</span>
		<input type="button" value="触发" onclick="f1()"/>
	</body>
</html>
